<template>
  <div>

    <div style="height: 500px;display: flex;padding-left: 10%;padding-right: 10%;">
      <img :src="borrowData.imageUrl"
           style="width: 260px;height: 380px;margin-top: auto;margin-bottom: auto;margin-left: 5%">
      <div style="margin-left: 3%;display: flex;margin-top: auto;margin-bottom: auto;width: 80%">
        <div style="color: black;font-size: 20px;width: 60%;">
          <span>书名： {{ borrowData.title }}</span><br><br>
          <span>作者： {{ borrowData.author }}</span><br><br>
          <span>出版商： {{ borrowData.publisher }}</span><br><br>
          <span>简介： {{ borrowData.summary }}</span>
        </div>
        <div style="margin-left: 5%;height: max-content;margin-top: auto;margin-bottom: auto">
          <el-timeline>
            <el-timeline-item
                v-for="(activity, index) in activities_new"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :hollow="activity.hollow"
                :timestamp="activity.timestamp"
            >
              <div>
                {{ activity.content }}
              </div>
            </el-timeline-item>
          </el-timeline>
          <div v-if="borrowData.delay !== 1 && borrowData.returnAt === null" style="margin-left: 10%;">
            <el-button @click="delayClick" style="height: 40px;margin-left: 20px" type="success" round>
              申请延期还书
            </el-button>
          </div>
          <div v-if="borrowData.returnAt === null" style="margin-left: 10%;margin-top: 10px">
              <el-button @click="returnClick" style="height: 40px;margin-left: 20px" type="success" round>
                  申请还书
              </el-button>
          </div>
        </div>
      </div>
    </div>

    <div style="font-size: 30px;width: max-content;margin-right: auto;margin-left: auto;
    font-weight: bold;">
        <div style="width: max-content">
          请你对该本书进行评价
        </div>
        <div style="width: max-content;margin-left: auto;margin-right: auto;display: flex">
          <el-rate style="margin-top: 10px" size="large"
                   :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
                   show-text
                   :disabled="borrowData.isScore === 1"
                   @change = "evaluation"
                   v-model="score"/>
          <div v-if="borrowData.isScore === 1"
              style="font-size: 13px;color: #8f8787;margin-top: auto;margin-bottom: auto;margin-left: 20px">
            已评价
          </div>
        </div>
    </div>

  </div>
</template>

<script setup>

import { MoreFilled } from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import axios from "../../axios/index.js";
import {ElMessage} from "element-plus";
import Body from "../Frame/Body.vue";

let route = useRoute()

let score = ref(5)

const evaluation = ()=>{
  console.log(score.value);
  axios.post("/score/add/",{
    score: score.value,
    borrowId: borrowData.borrowId
  }).then(res=>{
    borrowData.isScore = 1;
    ElMessage.success("评价成功")
  }).catch(error => {
    ElMessage.error(error)
  })
}

const activities = ref([
  {
    content: '借阅书籍',
    timestamp: '',
    type: 'primary',
    hollow: true,
  },
  {
    content: '借阅中',
    timestamp: '',
    icon: MoreFilled,
    type: 'primary',
  },
  {
    content: '已申请延期',
    timestamp: '',
    color: 'red',
  },
  {
    content: '已逾期',
    timestamp: '',
    color: 'red',
  },
  {
    content: '已归还',
    timestamp: '',
    color: '#0bbd87',
  },
])

const activities_new = ref([])

let borrowData = reactive({
  borrowId: useRoute().query.id,
  title: '我是鲁滨逊',
  imageUrl: '',
  publisher: "",
  summary: '',
  createdAt: '',
  state: 0,
  returnAt: '',
  isScore: 0,
  overdue: 0,
  delay: 0
})

const getOrderData = ()=>{
    //console.log("调用了");
    //console.log(route.query.id);
   axios.get('/borrow/detail/'+ route.query.id).then(res => {
    let temp = res.data.data;
    //console.log("接收到的 ");
    //console.log(temp.state);
    //console.log(temp.delay);
    borrowData.borrowId=temp.borrowId
    borrowData.title=temp.title
    borrowData.imageUrl=temp.imageUrl
    borrowData.author=temp.author
    borrowData.publisher=temp.publisher
    borrowData.createdAt=temp.createdAt
    borrowData.state=temp.state
    borrowData.returnAt=temp.returnAt
    borrowData.score=temp.score
    borrowData.isScore=temp.isScore
    borrowData.overdue=temp.overdue
    borrowData.delay=temp.delay

    if (temp.summary.length >= 100) {
      borrowData.summary = temp.summary.substring(0,100)+ "......";
    }else{
      borrowData.summary=temp.summary
    }

    //temp.overdue = 0;
    //temp.delay = 1;
    //temp.updatedAt = new Date().toDateString()

    // 初始化
    activities_new.value = []

    activities.value[0].timestamp = temp.createdAt;
    activities_new.value.push(activities.value[0]);
    activities_new.value.push(activities.value[1]);
    if (temp.overdue === 1) {
      activities.value[3].timestamp = temp.updatedAt;
      activities_new.value.push(activities.value[3]);
    }
    if (temp.overdue === 0 && temp.delay === 1){
        //console.log(temp.overdue);
        //console.log(temp.delay);
        activities.value[2].timestamp = temp.updatedAt;
      activities_new.value.push(activities.value[2]);
      activities_new.value.push(activities.value[1]);
    }
    if (temp.returnAt !== null) {
      activities.value[4].timestamp = temp.returnAt;
      activities_new.value.push(activities.value[4]);
    }
    //activities.value[0].timestamp = temp.createdAt;
    //activities.value[activities.value.length-1].timestamp = temp.returnAt;
  }).catch(error => {
    ElMessage.error(error)
  })
}
getOrderData()

//JS睡眠sleep()
const sleep = (numberMillis)=> {
    let now = new Date();
    let exitTime = now.getTime() + numberMillis;
    while (true) {
        now = new Date();
        if (now.getTime() > exitTime){
            return;
        }
    }
}

const delayClick = ()=>{
    axios.get("/borrow/delay/"+ borrowData.borrowId).then(()=>{
        borrowData.delay = 1;
        ElMessage.success("已延期一周！");
        getOrderData();
    }).catch(error=>{
        ElMessage.error(error)
    })
}

const returnClick = ()=>{
    axios.get("/borrow/return/"+ borrowData.borrowId).then(()=>{
        ElMessage.success("已还书");
        getOrderData();
    }).catch(error=>{
        ElMessage.error(error)
    })
}

</script>

<style scoped>
.el-rate{
  --el-rate-icon-margin: 10px;
  --el-rate-icon-size: 38px;
  --el-rate-fill-color: red;
  --el-rate-text-color: black;
}
</style>
